import { prefixStyle } from '@/api/utils';
import React, { memo, useEffect, useRef, useState } from 'react';
import { ProgressBarWrapper } from './style';
export default memo(function ProgressBar(props) {
  const progressBarRef = useRef();
  const progressRef = useRef();
  const progressBtnRef = useRef();
  const [touch, setTouch] = useState({});
  const { percent } = props;
  const { percentChange } = props;
  const progressBtnWidth = 14;
  const _offset = (offsetWidth) => {
    progressRef.current.style.width = `${offsetWidth}px`;
    progressBtnRef.current.style.transform = `translate3d(${offsetWidth}px, 0, 0)`;
  };
  const _changePercent = () => {
    // clientWidth 不包含border offset系列包含
    const barWidth = progressBarRef.current.clientWidth - progressBtnWidth;
    const curPercent = progressRef.current.clientWidth / barWidth; // 新的进度计算
    percentChange(curPercent); // 把新的进度传给回调函数并执行
  };
  const progressTouchStart = (e) => {
    const startTouch = {};
    startTouch.initiated = true; //initial 为 true 表示滑动动作开始了
    startTouch.startX = e.touches[0].pageX; // 滑动开始时横向坐标
    startTouch.left = progressRef.current.clientWidth; // 当前 progress 长度
    setTouch(startTouch);
  };
  const progressTouchMove = (e) => {
    if (!touch.initiated) return;
    // 滑动距离
    const deltaX = e.touches[0].pageX - touch.startX;
    const barWidth = progressBarRef.current.clientWidth - progressBtnWidth;
    const offsetWidth = Math.min(Math.max(0, touch.left + deltaX), barWidth);
    _offset(offsetWidth);
  };

  const progressTouchEnd = (e) => {
    const endTouch = JSON.parse(JSON.stringify(touch));
    endTouch.initiated = false;
    setTouch(endTouch);
    _changePercent();
  };
  // 点击后
  const progressClick = (e) => {
    // getBoundingClientRect
    // top: 元素上边距离页面上边的距离
    // left: 元素左边距离页面左边的距离
    // right: 元素右边距离页面左边的距离
    // bottom: 元素下边距离页面上边的距离
    // width: 元素宽度
    // height: 元素高度
    const rect = progressBarRef.current.getBoundingClientRect();
    const offsetWidth = e.pageX - rect.left;
    _offset(offsetWidth);
    _changePercent();
  };
  const transform = prefixStyle('transform');
  // 监听percent
  useEffect(() => {
    if (percent >= 0 && percent <= 1 && !touch.initiated) {
      const barWidth = progressBarRef.current.clientWidth - progressBtnWidth;
      const offsetWidth = percent * barWidth;
      progressRef.current.style.width = `${offsetWidth}px`;
      progressBtnRef.current.style[
        transform
      ] = `translate3d(${offsetWidth}px, 0, 0)`;
    }
    // eslint-disable-next-line
  }, [percent]);
  return (
    <ProgressBarWrapper>
      <div className="bar-inner" ref={progressBarRef} onClick={progressClick}>
        <div className="progress" ref={progressRef}></div>
        <div
          className="progress-btn-wrapper"
          ref={progressBtnRef}
          onTouchStart={progressTouchStart}
          onTouchMove={progressTouchMove}
          onTouchEnd={progressTouchEnd}
        >
          <div className="progress-btn"></div>
        </div>
      </div>
    </ProgressBarWrapper>
  );
});
